#include "lvgl/lvgl.h"
#include "../lvgl_components_ui.h"
#include "../lvgl_components_ui.h"
#include <stdio.h>
#include "utils/components/navigation_bar.h"
#include <SDL2/SDL.h>
#include "utils/components/lv_anim_component.h"
// 包含全部简体中文字体
// 文件名	                     含义说明
// lv_font_sans_sc_12.c	        适用于标签、图标文字、状态显示，Sans 字体（无衬线），字号 12（通常为 12px 或类似像素高度，字体占用内存小）
// lv_font_sans_sc_14.c	        适用于标题、按钮、正文显示，Sans 字体（无衬线），字号 14（约 14 px，更大一号，字体占用内存稍大，更清晰）
// “sc” 通常表示 “Simplified Chinese” 或 “Small Caps” （取决于生成时的字体源和命名规则）
// ，不过在 LVGL 官方字体中多指 “Simplified Chinese（简体中文）”。
#include "assets/fonts/chinese/lv_font_sans_sc_14.h"
#include "utils/file_util/file_util.h"

lv_obj_t *image_components_screen;

static uint8_t current_frame = 0;
static lv_timer_t *anim_timer;
static lv_obj_t *start_anim_btn;
static lv_obj_t *anim_img;
#define GIF_ANIM_IMAGE_W 640 // 动画图形宽度
#define GIF_ANIM_IMAGE_H 1024 // 动画图形高度
#define ANIM_INTERVAL 80 // 动画每帧间隔，单位毫秒
#define ANIM_FRAME_COUNT 13

static char anim_frames[ANIM_FRAME_COUNT][512];  // 改为可写字符数组
static void anim_timer_cb(lv_timer_t *timer) {
    current_frame++;
    if (current_frame >= ANIM_FRAME_COUNT) {
        lv_timer_del(anim_timer);
        anim_timer = NULL;
        current_frame = 0;
        lv_label_set_text(lv_obj_get_child(start_anim_btn, 0), "开始");
        return;
    }
    lv_image_set_src(anim_img, anim_frames[current_frame]);
}
static void start_btn_cb(lv_event_t *e) {
    if (!anim_timer) {
        current_frame = 0;
        lv_image_set_src(anim_img, anim_frames[0]);
        anim_timer = lv_timer_create(anim_timer_cb, ANIM_INTERVAL, NULL);
        lv_label_set_text(lv_obj_get_child(start_anim_btn, 0), "播放中...");
    }
}

static void back_btn_event_handler(lv_event_t * e)
{
    printf("back_btn_event_handler\n");
    lv_screen_load(lvgl_components_screen);//返回lvgl_components_screen屏幕
    // lv_scr_load()只是将活动屏幕切换为新的screen，把旧屏幕从显示链上移除（不显示），但不会删除旧屏幕对象本身
    // 因此如果不再需要image_components_screen必须手动释放，否则它会一直占用内存：
    lv_obj_del(image_components_screen);
}

//动画结束回调
void img_anim_end_cb() {
    printf("img anim end.\n");
}
static void img_opa_anim_cb(void *var, int32_t v)
{
    lv_obj_set_style_image_opa(var, v, LV_STATE_DEFAULT);
}
/* img点击事件回调函数 */
static void img_click_event_cb(lv_event_t * e)
{
    lv_obj_t * img = lv_event_get_target(e);//获取点击事件对应的组件对象img
    LV_LOG_USER("Image clicked!\n");

    // lv_obj_set_style_image_opa(img, LV_OPA_50, LV_STATE_DEFAULT); // 设置image透明度为50%即alpha为0.5
    // lv_obj_set_style_image_opa(img, LV_OPA_100, LV_STATE_DEFAULT); // 设置image透明度为100%即alpha为1

    half_opa_anim(img, 1);
}
void init_anim_frames() {
    // snprintf(anim_frames[0], sizeof(anim_frames[0]),
    //          "%s", get_asset_path("images/cymbal/cymbal_00.jpg"));
    for (int i = 0; i < ANIM_FRAME_COUNT; i++) {
        char filename[64];
        snprintf(filename, sizeof(filename), "images/cymbal/cymbal_%02d.jpg", i);
        snprintf(anim_frames[i], sizeof(anim_frames[i]), "%s", get_asset_path(filename));
    }
}
void image_components_ui(void) {
    init_anim_frames();
    image_components_screen = lv_obj_create(NULL);
    lv_obj_clear_flag(image_components_screen, LV_OBJ_FLAG_SCROLLABLE); // 禁止滚动
    lv_obj_t *nav = normal_nav_bar_create(image_components_screen, "image components", back_btn_event_handler);

    LV_IMG_DECLARE(back);
    const void *back_img_src = &back;

    // 图片img
    lv_obj_t *img = lv_image_create(image_components_screen);
    lv_image_set_src(img, &back);  // 设置图片
    lv_obj_align_to(img, nav, LV_ALIGN_OUT_BOTTOM_LEFT, 8, 16);
    /* 允许点击图片img */
    lv_obj_add_flag(img, LV_OBJ_FLAG_CLICKABLE);
    /* 图片img绑定点击事件回调 */
    lv_obj_add_event_cb(img, img_click_event_cb, LV_EVENT_CLICKED, NULL);

    // GIF动画容器（固定尺寸+禁止滚动，无多余样式）
    lv_obj_t *anim_img_container = lv_obj_create(image_components_screen);
    // 设置边框宽度，0不显示边框
    lv_obj_set_style_border_width(anim_img_container, 0, LV_PART_MAIN);
    int32_t container_w = 200;// ❌当lv_image_set_scale缩放无效时，则需要确保容器大小与图片像素大小一致，否则图片显示不全
    // ❌整数除法陷阱，整型除法，因为两个宏定义都为整数（#define 宏默认类型是 int），所以结果会被截断成0即得到的计算结果为0。
    // ✅解决办法：让至少一个参与运算的操作数是浮点类型：
    int32_t container_h = (int32_t)((float)GIF_ANIM_IMAGE_H / GIF_ANIM_IMAGE_W * container_w);//根据GIF图像实际宽高计算布局高度
    printf("container_h: %d\n", container_h);
    lv_obj_set_size(anim_img_container, container_w, container_h);
    lv_obj_clear_flag(anim_img_container, LV_OBJ_FLAG_SCROLLABLE); // 禁止滚动
    lv_obj_set_style_bg_opa(anim_img_container, 0, LV_PART_MAIN); // 透明
    lv_obj_align_to(anim_img_container, nav, LV_ALIGN_OUT_BOTTOM_RIGHT, -16, 16);//lv_obj_align在父视图中对齐，LV_ALIGN_CENTER居中

    // 图片控件（核心：静态路径+自动等比例适配）
    anim_img = lv_image_create(anim_img_container);
    printf("anim_frames 0: %s\n", anim_frames[0]);
    lv_image_set_src(anim_img, anim_frames[0]); // 图片资源的静态路径
    // ✅图像在绘制区域内的对齐方式：
    // 1️⃣LV_IMAGE_ALIGN_CONTAIN：
    // 让图片等比缩放到适合显示区域，但不会强制裁剪或铺满容器。实际缩放时，LVGL 会让图片保持完整显示，即使有部分超出容器边界。
    // 尽量等比显示完整，即不拉伸，但容器不一定能完全容纳。
    // 2️⃣LV_IMAGE_ALIGN_STRETCH：
    // 拉伸图片以完全铺满容器
    // 3️⃣LV_IMAGE_ALIGN_CENTER：
    // 保持原始比例并居中显示
    lv_image_set_align(anim_img, LV_IMAGE_ALIGN_CENTER);
    lv_obj_align(anim_img, LV_ALIGN_CENTER, 0, 0); // lv_obj_align在父视图中对齐，LV_ALIGN_CENTER居中
    lv_obj_set_style_opa(anim_img, LV_OPA_100, LV_PART_MAIN);
    lv_obj_set_size(anim_img, container_w, container_h);
    // LVGL 的lv_image_set_scale缩放函数，zoom设为256表示1.0倍不缩放，512放大2倍，128缩小一半，
    // 问题：
    // ❌从文件路径加载的图片支持放大，但不支持缩小，会显示空白：https://github.com/lvgl/lvgl/issues/4789
    // ❌如果图片太大，首次显示时会略慢（因为 LVGL 会在 GPU/CPU 上执行像素缩放）；
    // ✅解决办法：
    // (推荐)方案1️⃣：尽量确保图片与组件实际大小趋近，不做缩放处理
    // 方案2️⃣：将图片转为c文件，就可以支持缩放
    // lv_image_set_scale(anim_img, 128);

    // Start按钮（右侧位置）
    start_anim_btn = lv_btn_create(image_components_screen);
    // LV_PCT(x)是宏函数，用于在布局时表示相对于父对象的百分比尺寸，例设置50%：LV_PCT(50)
    lv_obj_set_size(start_anim_btn, LV_PCT(10), 25);
    lv_obj_set_style_bg_color(start_anim_btn, lv_color_hex(0x4CAF50), LV_PART_MAIN);
    // ✅start_anim_btn顶部中心点布局对齐：相对anim_img_container的底部中心点x偏移0px，y偏移16px
    lv_obj_align_to(start_anim_btn, anim_img_container, LV_ALIGN_OUT_BOTTOM_MID, 0, 16);
    lv_obj_add_event_cb(start_anim_btn, start_btn_cb, LV_EVENT_CLICKED, NULL);

    lv_obj_t *start_label = lv_label_create(start_anim_btn);
    lv_label_set_text(start_label, "开始");
    lv_obj_set_style_text_font(start_label, &lv_font_sans_sc_14, LV_PART_MAIN);//中文14号字体
    lv_obj_align(start_label, LV_ALIGN_CENTER, 0, 0);// 在父视图居中

    lv_obj_t * img2 = lv_image_create(image_components_screen);
    lv_image_set_src(img2, LV_SYMBOL_OK "Morgan Chen");// OK图标附加一段文本
    lv_obj_align_to(img2, img, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 16);

    //Q: ✅调用lv_screen_load方法把这个image_components_screen设置为当前活动屏幕替换掉原来的lvgl_components_screen主屏幕而不是遮挡而已
    // 此时调用lv_scr_act()方法会返回该image_components_screen
    // lvgl_components_screen是一个指针，指向当前活动屏幕对象，被替换掉当前活动屏幕后不会变成NULL即不会变，
    // 也不会自动释放（除非手动调用lv_obj_del(lvgl_components_screen)），它仍然指向原来的屏幕对象，只是这个屏幕不再是活动屏幕
    lv_screen_load(image_components_screen);
}
